import { ref, onMounted, onBeforeUnmount } from 'vue';

export default function useTable() {
  // 表格高度
  const height = ref(window.innerHeight);
  // 获取表格高度
  function getTableHeight() {
    height.value = window.innerHeight;
    // 获取main区域元素
    const element = document.querySelector('#main-content-display');
    const bread = document.querySelector('#main-content-bread');
    if (element) {
      // 获取main区域所有子元素数组
      const children = Array.from(element.children);
      children.forEach((e) => {
        // 表格高度=window.innerHeight(视窗高度)-header头部高度-面包屑高度-main区域所有子元素(不包含el-table自己)高度
        if (Array.from(e.classList).includes('el-table')) {
          height.value =
            height.value - (parseInt(e.style.marginTop || 0) + parseInt(e.style.marginBottom || 0));
        } else {
          height.value =
            height.value -
            (e.offsetHeight +
              parseInt(e.style.marginTop || 0) +
              parseInt(e.style.marginBottom || 0));
        }
      });
      // 如果有面包屑
      if (bread) {
        height.value -= 156;
      } else {
        height.value -= 110;
      }
    } else {
      height.value -= 156;
    }
  }

  onMounted(() => {
    getTableHeight();
    window.addEventListener('resize', getTableHeight);
  });
  onBeforeUnmount(() => {
    window.removeEventListener('resize', getTableHeight);
  });

  return {
    height,
    getTableHeight
  };
}
